﻿<template>
  <el-submenu :index = "menuArray.function_no" :key = "menuArray.function_no"
  popper-class = 'collapse_pop'>
    <template slot = "title">
      <span slot = "title" class = 'slider_titleContent'>{{ menuArray.function_name }}</span>
      <i class = "iconfont icon-arrowrightb icon_After"></i>
    </template>
    <template v-for = "(subItem, i) in menuArray.children">
      <!-- 还会有下级菜单时 -->
      <template v-if = 'subItem.children.length'>
        <The-Silde-Menu-Item :menuArray = 'subItem' :key = 'i'></The-Silde-Menu-Item>
      </template>
      <template v-else>
        <!-- 站内链接时 -->
        <el-menu-item :key = "i" :index = "subItem.function_url" v-if = "subItem.url_type === 'Router'">
          {{ subItem.function_name }}
        </el-menu-item>
        <!-- 站外链接时 -->
        <el-menu-item :key = "i" disabled :index = "subItem.function_url" class = 'silder_linkContent' v-if = "subItem.url_type === 'URI'">
          <a :href = "subItem.function_url.indexOf('?') > -1 ? subItem.function_url + '&_token='+ getQuery : subItem.function_url + '?_token='+ getQuery"
          :target = "subItem.target ? subItem.target : '_blank'" class = 'linkEl'>{{ subItem.function_name }}</a>
        </el-menu-item>
      </template>
    </template>
  </el-submenu>
</template>

<script>
export default {
  props: ['menuArray'],
  name: 'TheSildeMenuItem',
  computed: {
    getQuery () {
      return sessionStorage.getItem('token')
    }
  }
}
</script>
